<template>
  <base-layout>
    <template #searchPanel>
      <el-form
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        :rules="rules"
        label-width="80px"
        label-position="right"
      >
        <el-row class="">
          <el-col :span="12">车辆信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-upload
              action=""
              :show-file-list="false"
              list-type="picture-card"
              :http-request="brandLogoRequest"
            >
              <img v-if="logoUrl" :src="logoUrl" alt="" class="avatar" />
              <i class="el-icon-plus" v-if="!logoUrl"></i>
            </el-upload>
          </el-col>
          <el-col :span="20">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="品牌:" prop="brandId">
                  <el-select
                    clearable
                    ref="dragSelect"
                    v-model="fromdata.brandId"
                    class="drag-select"
                    @change="getSeries()"
                    @clear="clearSelectOptions(1)"
                  >
                    <el-option
                      v-for="item in carModel.brands"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="车系:" prop="seriesId">
                  <el-select
                    clearable
                    ref="dragSelect"
                    v-model="fromdata.seriesId"
                    @change="getTimeType()"
                    @clear="clearSelectOptions(2)"
                    class="drag-select"
                  >
                    <el-option
                      v-for="item in carModel.series"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="年款:" prop="timeType">
                  <el-select
                    clearable
                    ref="dragSelect"
                    v-model="fromdata.timeType"
                    class="drag-select"
                  >
                    <el-option
                      v-for="item in carModel.timeTypes"
                      :key="item"
                      :value="item"
                      :label="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="级别:" prop="rankValue">
                  <el-select
                    clearable
                    ref="dragSelect"
                    v-model="fromdata.rankValue"
                    class="drag-select"
                  >
                    <el-option
                      v-for="item in carModel.rankValues"
                      :key="item"
                      :value="item"
                      :label="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="车型:" prop="modelName">
                  <el-input clearable v-model="fromdata.modelName" placeholder="车型"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="指导价格:" prop="manufacturerPrice">
                  <el-input clearable v-model.number="fromdata.manufacturerPrice" placeholder="指导价"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="备注:">
                  <el-input
                    type="textarea"
                    placeholder="备注信息"
                    :rows="2"
                    clearable
                    v-model="fromdata.remark"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">车辆展示图</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpRequest"
            :fileList="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-row>

        <el-row>
          <el-col :span="24" align="right">
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </base-layout>
</template>
<script>
import {
  getAllBrand,
  getSeries,
  getModelTimeType,
  getModelRank,
  getRankValue,
  details,
  addData,
  updateData,
} from '@/api/after-sale/systemManage/carModel'
import baseMixin from '@/mixins/base'
import {
  getDict,
  fileUpload,
  getImageUrl,
  parseTimeToYMDHMS,
} from '@/utils/index'
export default {
  mixins: [baseMixin({})],
  data() {
    return {
      fromdata: {
        brandId: "",
        brandLogo: "",
        brandName: "",
        initial: "",
        manufacturerPrice: "",
        modelName: "",
        rankValue: "",
        seriesId: "",
        seriesName: "",
        timeType: "",
        photos: [], //	照片 上传时用,分割
      },
      rules: {
        brandId: [{ required: true, message: '品牌不能为空', trigger: 'blur' }],
        seriesId: [{ required: true, message: '车系不能为空', trigger: 'blur' }],
        timeType: [{ required: true, message: '年款不能为空', trigger: 'blur' }],
        rankValue: [{ required: true, message: '级别不能为空', trigger: 'blur' }],
        modelName: [{ required: true, message: '车型不能为空', trigger: 'blur' }],
        manufacturerPrice: [{ required: true, message: '指导价格不能为空', trigger: 'blur' }],
      },
      logoUrl: '',
      dict: [
        { id: '1', value: '测试' },
        { id: '2', value: '测试2' },
      ],
      fileList: [],
      carModel: {
        brands: [],
        series: [],
        timeTypes: [],
        rankValues: [],
      },
    }
  },
  async created() {
    this.getAllBrand();
    this.getRankValue();
    const id = this.$route.query && this.$route.query.id;
    if (id){
      const { data } = await details(id);
      if (data){
        this.fromdata = data;
      }
    }
  },
  methods:{
    //车型logo文件上传
    brandLogoRequest(value) {
      fileUpload(value.file).then((res) => {
        let { success, data } = res
        if (success) {
          this.fromdata.brandLogo = data.id
          this.logoUrl = getImageUrl(data.id)
        }
      })
    },
    //车辆展示图上传
    httpRequest(value) {
      fileUpload(value.file).then((res) => {
        let { success, data } = res
        if (success) this.fromdata.photos.push(data.id)
      })
    },
    getRankValue(){
      getRankValue().then((res) => {
        let { data, success } = res;
        this.carModel.rankValues = success ? res.data : [];
      })
    },
    getAllBrand(){
      getAllBrand().then((res) => {
        let { data, success } = res;
        this.carModel.brands = success ? res.data : [];
      })
    },
    getSeries() {
      if (!this.fromdata.brandId) return;
      getSeries(this.fromdata.brandId).then((res) => {
        let { data, success } = res
        this.carModel.series = success ? res.data : [];
      })
    },
    getTimeType() {
      if (!this.fromdata.brandId || !this.fromdata.seriesId) return;
      getModelTimeType(this.fromdata.brandId, this.fromdata.seriesId).then((res) => {
        let { data, success } = res
        this.carModel.timeTypes = success ? res.data : [];
      })
    },
    clearSelectOptions(num){
      if (num == 1) {
        this.carModel.series = [];
        this.carModel.timeTypes = [];
        this.fromdata.seriesId = '';
        this.fromdata.timeType = '';
      } else if (num == 2){
        this.carModel.timeTypes = [];
        this.fromdata.timeType = '';
      }
    },
    onSubmit() {
      this.$refs.fromdata.validate(valid => {
        if (valid) {
          this.saveData();
        } else {
          return false
        }
      })
    },
    async saveData() {
      const { success } = this.fromdata.id ? await updateData(this.fromdata) : await addData(this.fromdata)
      if (success) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.closeRouter();
      } else {
        this.$message.error('操作失败')
      }
    },
  }

}
</script>
